<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<!--<link th:href="@{/css/jqCron.css}" rel="stylesheet"/>-->
<!--<link th:href="@{/css/jquery-cron-quartz.css}" rel="stylesheet"/>-->
<link th:href="@{/css/jquery-cron.css}" rel="stylesheet"/>

<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
	<form class="form-horizontal m" id="form-jmeterTestPlan-edit" th:object="${jmeterTestPlan}">

		<input id="treeId" name="relModuleId" type="hidden" th:field="*{relModuleId}"/>

		<input id="id" name="id" th:field="*{id}"  type="hidden">
		<div class="form-group">
			<label class="col-sm-3 control-label">名称：</label>
			<div class="col-sm-8">
				<input id="name" name="name" th:field="*{name}" class="form-control" type="text">
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-3 control-label">选择所属项目：</label>
			<div class="col-sm-8">
				<select id="relProjectId" name="relProjectId" class="form-control m-b" >
					<option value="" >请选择</option>
					<option th:each="item:${projects}" th:text="${item.projectName}" th:value="${item.projectId}" ></option>
				</select>
			</div>
		</div>


		<div class="form-group">
			<label class="col-sm-3 control-label">模块名称：</label>
			<div class="col-sm-8">
				<input class="form-control" type="text" onclick="selectModuleTree()" id="treeName" readonly="true" th:field="*{relModuleName}"/>
			</div>
		</div>


		<div class="form-group">
			<label class="col-sm-3 control-label">测试场景：</label>
			<div class="col-sm-8">
				<select id="scenario" name="scenario" class="form-control m-b">
					<option value="" >请选择</option>
					<option value="基准测试" >基准测试</option>
					<option value="负载测试">负载测试</option>
					<option value="压力测试">压力测试</option>
					<option value="容量测试">容量测试</option>
				</select>
			</div>
		</div>



		<div class="form-group">
			<label class="col-sm-3 control-label">接口名称：</label>
			<div class="col-sm-8">
				<input id="interfaceName"th:field="*{interfaceName}"  name="interfaceName" class="form-control" type="text">
			</div>
		</div>




		<div class="form-group">
			<label class="col-sm-3 control-label" >选择测试用例：</label>
			<div class="col-sm-8">
				<select id="caseId" name="caseId" class="form-control m-b" multiple="multiple"  >
					<option value="" >请选择</option>
					<option th:each="item:${cases}" th:text="${item.caseName}" th:value="${item.id}" ></option>
				</select>
			</div>
		</div>


		<label class="col-sm-3 control-label">选择计划执行方式：</label>
		<div class="radio-box">
			<input type="radio"  name="jobType" value="0"  th:checked="${jmeterTestPlan.jobType == 0 ? true : false}"   >
			<label style="color:#2b31dc" th:text="不设置" ></label>
		</div>
		<div class="radio-box">
			<input type="radio" name="jobType" value="1" th:checked="${jmeterTestPlan.jobType == 1 ? true : false}">
			<label style="color:#2b31dc" th:text="指定时间执行"></label>
		</div>
		<div class="radio-box">
			<input type="radio"  name="jobType" value="2" th:checked="${jmeterTestPlan.jobType == 2 ? true : false}">
			<label style="color:#2b31dc" th:text="cron表达式执行"></label>
		</div>


		<input id="cronExpr" th:field="*{cronExpr}" name="cronExpr" class="form-control" type="hidden" >

		<div class="form-group" id="div-con-expre" th:style="${jmeterTestPlan.jobType == 2 ? 'display:block' : 'display:none'}" >
			<label class="col-sm-3 control-label">cron表达式：</label>
<!--			<div class="col-sm-8">-->
<!--				<input id="cronExpr" th:field="*{cronExpr}" name="cronExpr" class="form-control" type="text" disabled>-->
<!--			</div>-->
		</div>

			<div class="form-group"  th:style="${jmeterTestPlan.jobType == 1 ? 'display:block' : 'display:none'}" id="div-schedule-time">
			<label class="col-sm-3 control-label">指定时间：</label>
			<div class="col-sm-8">
				<input id="schedule-time" name="scheduledTime" class="form-control" type="text" readonly="readonly">
			</div>
		</div>


		<div class="form-group">
			<label class="col-sm-3 control-label">备注：</label>
			<div class="col-sm-8">
				<input id="remark" name="remark" th:field="*{remark}" class="form-control" type="text">
			</div>
		</div>
	</form>
</div>
<div th:include="include::footer"></div>
<script th:src="@{/ajax/libs/select/select2.js}"></script>
<!--<script th:src="@{/js/plugins/jqCron.js}"></script>-->
<!--<script th:src="@{/js/plugins/jqCron.cn.js}"></script>-->
<!--<script th:src="@{/js/plugins/jquery-cron-quartz.min.js}"></script>-->
<script th:src="@{/js/plugins/jquery-cron.js}"></script>

<script type="text/javascript">
	var prefix = ctx + "jmeter/jmeterTestPlan"
	var testCasePrefix = ctx + "jmeter/jmeterTestCase"
	var modulePrefix = ctx + "testmanagmt/projectCaseModule";

	$("#form-jmeterTestPlan-add").validate({
		rules:{
			xxxx:{
				required:true,
			},
		}
	});

	/*模块管理-新增-选择父模块树*/
	function selectModuleTree() {
		var options = {
			title: '模块选择',
			width: "380",
			url: modulePrefix + "/selectProjectCaseModuleTree/" + $("#treeId").val(),
			callBack: doSubmit
		};
		$.modal.openOptions(options);
	}


	/*模块管理-新增-选择父模块树*/
	function selectModuleTree() {
		var options = {
			title: '模块选择',
			width: "380",
			url: modulePrefix + "/selectProjectCaseModuleTree/" + $("#treeId").val(),
			callBack: doSubmit
		};
		$.modal.openOptions(options);
	}

	function doSubmit(index, layero){
		var body = layer.getChildFrame('body', index);
		$("#treeId").val(body.find('#treeId').val());
		$("#treeName").val(body.find('#treeName').val());
		layer.close(index);


	}

	/*选择项目初始化模块树*/
	function initializeModuleTree() {
		$.validate.resetForm();
		$.validate.form();
		var projectId = $("#projectId").val();
		$.ajax({
			cache: true,
			type: "GET",
			url: modulePrefix + "/getModuleByProjectId/" + projectId,
			data: {},
			async: false,
			error: function (request) {
				$.modal.alertError("系统错误");
			},
			success: function (data) {
				$("#treeId").val(data.moduleId);
				$("#treeName").val(data.moduleName);
			}
		});
	}

	function submitHandler() {
		if ($.validate.form()) {

			let  data = $('#form-jmeterTestPlan-edit').serializeObject();
			data.relCaseIdList=$("#caseId").val();
			data.cronExpr=$("#cronExpr").val();
			$.operate.saveJson(prefix + "/edit", JSON.stringify(data));
		}
	}


	function showPlanCase() {
		var row= $.map($('#bootstrap-table').bootstrapTable('getSelections'), function (row) {
			return row;
		});

		var url = "/404.html";
		if ($.common.isNotEmpty(row)) {
			url = $.table._option.customUrl.replace("{id}", row[0].planId);
		}
		openFull("选择测试用例", testCasePrefix);
	}

	function openFull(title, url, width, height) {
		//如果是移动端，就使用自适应大小弹窗
		if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
			width = 'auto';
			height = 'auto';
		}
		var index = layer.open({
			type: 2,
			area: [width + 'px', height + 'px'],
			fix: false,
			//不固定
			maxmin: true,
			shade: 0.3,
			title: title,
			content: url,
			btn: ["保存选择用例", "保存查询用例", '关闭'],
			// 弹层外区域关闭
			shadeClose: true,
			yes: function(index, layero) {
				var iframeWin = layero.find('iframe')[0];
				iframeWin.contentWindow.submitHandler();
			},
			btn2: function(index, layero) {
				var iframeWin = layero.find('iframe')[0];
				iframeWin.contentWindow.submitHandlerAll();
				return false;
			},
			cancel: function(index) {
				return true;
			}
		});
		layer.full(index);
	}


	$(function () {

		// 方法名称：获取当前选中的值；icheck-radio change事件；点击事件;
		$("input:radio[name='jobType']").on('ifChecked', function(event){
			let val = $(this).val();

			if(val==0){
				$("#div-schedule-time").hide();
				$("#div-con-expre").hide();
				return;
			}

			if(val==1){
				$("#div-schedule-time").show();
				$("#div-con-expre").hide();
				return;
			}

			if(val==2){
				$("#div-con-expre").show();
				$("#div-schedule-time").hide();
				return;
			}
		});


		$("#caseId").select2();
		var relCaseIdList = [[${relCaseIdList}]];
		$("#caseId").val(relCaseIdList).change();


		$("#relProjectId").select2();
		var selectedProjectId = [[${jmeterTestPlan.relProjectId}]];
		$("#relProjectId").val(selectedProjectId).change();


		$("#scenario").select2();
		var scenario = "[[${jmeterTestPlan.scenario}]]";
		$("#scenario").val(scenario).change();



		layui.use('laydate', function() {
			var laydate = layui.laydate;
			var times =$('#schedule-time');
			for (var i = 0; i < times.length; i++) {
				var time = times[i];
				laydate.render({
					elem: time,
					value: "[[${jmeterTestPlan.date}]]",
					theme: 'molv',
					type: 'datetime',
					trigger: 'click',
					'format':'yyyy-MM-dd HH:mm:ss',
					done: function(value, date) {}
				});
			}
		});

		let defaultCronExpr="[[${jmeterTestPlan.cronExpr}]]"

		$('#div-con-expre').cron(
				{
					 initial: defaultCronExpr==""?"0 0/1 * * * ?":defaultCronExpr,
					onChange: function() {
						// initial: "42 3 * * 5",
						$("#cronExpr").val($(this).cron("value"));
					}
				}
		);

		// $('#div-con-expre').cronBuilder({
		// 	selectorLabel: "选择时间段:  ",
		// 	language: "zh_CN"
		// });
	});

</script>
</body>
</html>
